<template>
  <el-row>
    <!-- <el-col :span="21">
      <el-form :model="queryCriteria" :inline="true">
        <el-form-item
          label="名称:"
          prop="name"
        >
          <el-input
            v-model="queryCriteria.name"
            placeholder="请输入任务名称"
          />
        </el-form-item>
        <el-button round type="primary" @click="queryHandler">
          查询
        </el-button>
      </el-form>
    </el-col> -->
    <el-table
      :data="pagination.list"
      border
      style="width: 100%"
    >
      <el-table-column
        v-for="item in cols"
        :key="item.label"
        :label="item.label"
        :prop="item.value"
      />
      <el-table-column
        label="异常信息"
      >
        <template slot-scope="scope">
          <el-button type="primary" @click="getJobExceptionLogHandle(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :page-sizes="[4,8,12,16]"
      :pagination="pagination"
      @page-size-changed="pageSizeChangeHandler"
      @page-changed="pageChangeHandler"
    />

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>异常日志【{{ saveJobname }}】</span>
      </div>
      <div v-if="logInfo" class="text-item">
        {{ logInfo }}
        <!-- <div class="text-item">
          {{ '日志ID: ' + o ? o : '暂无' }}
        </div>
        <div class="text-item">
          {{ '执行器地址: ' + o ? o : '暂无' }}
        </div>
        <div class="text-item">
          {{ '起始行号: ' + o ? o : '暂无' }}
        </div>
        <div class="text-item">
          {{ '结束行号: ' + o ? o : '暂无' }}
        </div>
        <div class="text-item">
          {{ '是否结束: ' + o ? o : '暂无' }}
        </div> -->
      </div>
      <div v-else class="text-item">
        请点击“查看”作业异常日志
      </div>
    </el-card>
  </el-row>
</template>

<script>
import { getJobLogList, getJobExceptionLog } from '@/api/workDevelopment/index'
import queryPageForm from '../components/queryPageForm.js'
import { deepMerge } from '../utils/index'

export default {
  mixins: [queryPageForm],
  props: {
    records: { type: Object, default: () => ({}) }
  },
  data() {
    const queryCriteria = this.initQueryCriteria()
    return {
      queryCriteria: queryCriteria,
      saveJobname: '请点击“查看”',
      cols: [
        { label: 'JobId', value: 'jid' },
        { label: '作业名称', value: 'name' },
        { label: '运行集群', value: 'clusterAlias' },
        { label: '状态', value: 'status' },
        { label: '开始时间', value: 'createTime' },
        { label: '结束时间', value: 'finishTime' }
      ],
      logInfo: ' 请点击“查看”作业异常信息'
    }
  },
  methods: {
    // 初始化搜索表单
    initQueryCriteria(form = {}) {
      return deepMerge(form, {
        name: this.records.jobName
      })
    },
    // 搜索
    executeQueryPage() {
      let params = this.createQueryParams();
      params.filters.dirId = this.records.id;
      getJobLogList(params).then((data) => {
        console.log(data)
        this.queryResultHandler(data)
      })
    },
    // 获取异常日志
    async getJobExceptionLogHandle(param) {
      console.log(param)
      this.saveJobname = param.name
      const res = await getJobExceptionLog({ jobId: param.jid })
      if (res && res !== 'null') {
        this.logInfo = res
      } else {
        this.logInfo = '暂无异常日志'
      }
    },
    notifyFailure(text) {
      this.$q.notify({ type: 'negative', position: 'top', message: text })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  margin-top: 15px;
  padding: 15px 10px;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: #777;
  .text-item{
    font-size: 14px;
    color: #f5f5f5;
  }
}
</style>
